import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { Row, Col, Button, Select } from 'antd';
import rTime from '../../utils/formateDate';
import request from '@/utils/request'
import './index.scss'

const { Option } = Select;
export default function Records({ userInfo, type, getData = () => { } }) {
    //获取打卡信息
    const [records, setRecords] = useState({ todayComplete: false, records: [] });
    const getUserRecords = useCallback(async (days = 7, pure = false) => {
        const { data } = await request.get('record/getUserRecords', { params: { type, userId: userInfo.id, days, pure } });
        if (data.data.records.length) {
            if (data.data.records.some(item => item.date === rTime(Date()) && item.time)) {
                data.data.todayComplete = true
            } else {
                data.data.todayComplete = false
            }
        }
        getData(data.data.records);
        setRecords(data.data);
    }, [])
    //打卡回调
    const addRecord = useCallback(async () => {
        const { data } = await request.post('/record/addRecord', { type });
        getUserRecords();
    }, [records])
    //select回调
    const [days, setDays] = useState(7)
    const handleChange = useCallback((_, { key }) => {
        setDays(key)
        getUserRecords(key);
    }, [])
    useEffect(() => {
        getUserRecords();
    }, [])
    return (
        <div style={{ margin: '40px 0' }}>
            <Row style={{ height: 280 }}>
                <Col span={17} push={6} offset={1} style={{ padding: '20px', backgroundColor: '#fff', display: 'flex' }}>
                    <div className="info-wrapper">
                        <div className="title">
                            {type === 'getup' ? '早起概况' : (type === 'back' ? '早归概况' : '打扫概况')}
                        </div>
                        <div className="count">
                            <span>
                                {
                                    type === 'getup' ?
                                        (records.records.filter(item => parseInt(item.time) <= 8).length / days).toFixed(2)
                                        :
                                        (
                                            type === 'back' ?
                                                (records.records.filter(item => parseInt(item.time) <= 22).length / days).toFixed(2)
                                                :
                                                (records.records.length / days).toFixed(2)
                                        )
                                }%
                            </span>
                        </div>
                        <div className="slect">
                            <Select defaultValue="最近7天" onChange={handleChange}>
                                <Option key="7" value="最近7天">最近7天</Option>
                                <Option key="14" value="最近14天">最近14天</Option>
                                <Option key="30" value="最近30天">最近30天</Option>
                                <Option key="50" value="最近50天">最近50天</Option>
                                <Option key="100" value="最近100天">最近100天</Option>
                            </Select>
                        </div>
                    </div>
                    <div className="list-wrapper">
                        {
                            type === 'getup' ?
                                records.records.map(item => {
                                    return (
                                        <div className={item.time ? (parseInt(item.time) <= 8 ? 'list early' : 'list late') : 'list no_record'} key={item.id}>
                                            <span>{item.date} {item.time ? item.time : ''}</span>
                                            <span>{item.time ? (parseInt(item.time) <= 8 ? '早起' : '晚起') : '无记录'}</span>
                                        </div>
                                    )
                                })
                                :
                                (
                                    type === 'back' ?
                                        records.records.map(item => {
                                            return (
                                                <div className={item.time ? (parseInt(item.time) <= 22 ? 'list early' : 'list late') : 'list no_record'} key={item.id}>
                                                    <span>{item.date} {item.time ? item.time : ''}</span>
                                                    <span>{item.time ? (parseInt(item.time) <= 22 ? '早归' : '晚归') : '无记录'}</span>
                                                </div>
                                            )
                                        })
                                        :
                                        records.records.map(item => {
                                            return (
                                                <div className={item.time ? (parseInt(item.time) <= 12 ? 'list early' : 'list late') : 'list no_record'} key={item.id}>
                                                    <span>{item.date} {item.time ? item.time : ''}</span>
                                                    <span>{item.time ? (parseInt(item.time) <= 12 ? '上午打扫' : '下午打扫') : '无记录'}</span>
                                                </div>
                                            )
                                        })
                                )
                        }
                    </div>
                </Col>
                <Col span={6} pull={18} style={{ padding: '30px', backgroundColor: '#fff', display: 'flex', justifyContent: 'center' }}>
                    <Button type="primary" shape="circle" size="large" style={{ width: 200, height: 200, fontSize: 26 }} onClick={addRecord} disabled={records.todayComplete}>
                        {
                            records.todayComplete ? '今日已打卡' : (type === 'getup' ? '起床打卡' : (type === 'back' ? '归宿打卡' : '打扫打卡'))
                        }
                        <p style={{ fontSize: 16, marginTop: 20 }}>
                            {rTime(Date())}

                        </p>
                    </Button>
                </Col>
            </Row>
        </div >
    )
}
